<template>
  <view class="container">
    <!-- 订单信息 -->
    <view class="section">
      <p class="section-title">订单信息</p>
      <view class="section-content">
        <view class="info-row">
          <p>订单号：{{ orderNumber }}</p>
          <p class="status" :style="{ color: statusColor }">{{ orderStatus }}</p>
        </view>
        <p>服务项目：{{ serviceCategory }}</p>
        <p>下单时间：{{ orderTime }}</p>
        <p>预约时间：{{ appointmentTime }}</p>
        <p>车辆：{{ vehicleInfo }}</p>
        <p>备注：{{ remark }}</p>
      </view>
    </view>

    <!-- 订单详情 -->
    <view class="section">
      <p class="section-title">订单详情</p>
      <view class="section-content">
        <p>{{serviceName}}</p>
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="section">
      <view class="section-content">
        <view class="info-row">
          <p>原价</p>
          <p class="price strike-through">{{ originalPrice }}</p>
        </view>
        <view class="info-row">
          <p>优惠</p>
          <p class="price">{{ discount }}</p>
        </view>
        <view class="divider"></view>
        <view class="info-row">
          <p>支付金额</p>
          <p class="price final-price">{{ finalPrice }}</p>
        </view>
      </view>
    </view>

    <!-- 评价结果 -->
    <view class="section">
      <p class="section-title">评价结果</p>
      <view class="section-content">
        <p>评价时间：{{ evaluationTime }}</p>
        <view class="info-row">
          <p>评分：</p>
          <view class="star-rating">
            <view v-for="star in 5" :key="star" class="star" :class="{ filled: star <= rating }">★</view>
          </view>
        </view>
        <p>评语：{{ content }}</p>
      </view>
    </view>

    <!-- 评价图片 -->
    <view class="section" v-if="imagesList.length > 0">
      <p class="section-title">评价图片</p>
      <view class="image-container">
        <image v-for="(img, index) in imagesList" :key="index" :src="img.imageUrl" class="review-image" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getToken } from '@/utils/auth';

const orderNumber = ref('');
const orderStatus = ref('');
const statusColor = ref('#EA1703');
const serviceCategory = ref('');
const orderTime = ref('');
const appointmentTime = ref('');
const vehicleInfo = ref('');
const remark = ref('');
const orderDetails = ref([]);
const originalPrice = ref('');
const discount = ref('');
const finalPrice = ref('');
const evaluationTime = ref('');
const rating = ref(0);
const content = ref('');
const reviewId = ref('');
const imagesList = ref([]);
const serviceName = ref([]);

onLoad((options) => {
  reviewId.value = options.reviewId || '';
  fetchOrderAndReviewData();
});

// 获取评价数据和订单详情
const fetchOrderAndReviewData = () => {
  const token = getToken();
  if (!token) {
    console.error('未找到 Token');
    return;
  }

  uni.request({
    url: `http://localhost:8866/sn/reviews/getReviewsDetails/${reviewId.value}`,
    method: 'GET',
    header: { Authorization: token },
    success: (res) => {
      if (res.statusCode === 200 && res.data) {
        const reviewDetails = res.data.data;
        evaluationTime.value = reviewDetails.createdAt;
        rating.value = reviewDetails.rating;
        content.value = reviewDetails.content;
        // 获取评价图片
        if (reviewDetails.imageId) {
          fetchImages(reviewDetails.imageId);
        }

        // 获取订单详情
        fetchOrderDetails(reviewDetails.orderNumber);
      }
    },
    fail: (err) => console.error('获取评论数据失败', err),
  });
};
// 获取订单详情
const fetchOrderDetails = (orderId) => {
  const token = getToken();
  uni.request({
    url: `http://localhost:8866/sn/orderRecords/getOrderRecords/${orderId}`,
    method: 'GET',
    header: { Authorization: token },
    success: (res) => {
      if (res.statusCode === 200 && res.data) {
        const order = res.data.data;
        orderNumber.value = order.orderNumber;
		serviceName.value = order.serviceName;
        orderStatus.value = order.status;
        statusColor.value = order.status === '已完成' ? '#28A745' : '#EA1703';
        serviceCategory.value = order.serviceCategory;
        orderTime.value = order.orderTime;
        appointmentTime.value = order.appointmentTime;
        vehicleInfo.value = order.vehicleInfo;
        remark.value = order.remark;
        orderDetails.value = order.orderDetails || [];
        originalPrice.value = order.totalAmount;
        discount.value = order.discountAmount;
        finalPrice.value = order.actualAmount;
      }
    },
    fail: (err) => console.error('获取订单数据失败', err),
  });
};

// 获取评价图片
const fetchImages = (imagesId) => {
  const token = getToken();
  uni.request({
    url: `http://localhost:8866/sn/images/getImages/${imagesId}`,
    method: 'GET',
    header: { Authorization: token },
    success: (res) => {
      if (res.statusCode === 200 && res.data) {
      imagesList.value = res.data.data || [];
      }
    },
    fail: (err) => console.error('获取图片失败', err),
  });
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f9f9f9;
}
.section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price {
  font-size: 16px;
  color: #e74c3c;
  font-weight: bold;
}
.final-price {
  font-size: 18px;
  color: #2ecc71;
  font-weight: bold;
}
.star-rating {
  display: flex;
  font-size: 18px;
}
.star {
  color: #ccc;
  margin-right: 3px;
}
.star.filled {
  color: #FFD700;
}
.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.review-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}
</style>
